<!DOCTYPE html>
<html>
<head>
    <title>bDialog使用实例</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
	
	<link rel="stylesheet" href="../lib/bdialog/b.dialog.bootstrap3.css" type="text/css">
	<link rel="stylesheet" href="../css/bdialog/dialog.css" type="text/css">
    
    <link rel="stylesheet" href="../css/bdialog/header.css" />
    <link rel="stylesheet" href="../css/bdialog/demo.css" />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-4688926342467996",
    enable_page_level_ads: true
  });
</script>
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.github.io/bdialog/index.html" class="navbar-brand">bDialog</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="guide.html" >Guide</a>
                </li>
                <li class="active">
                    <a href="javascript:void(0);" >Demo</a>
                </li>
                <li>
                    <a href="docs.html" >Documentation</a>
                </li>
                <li>
                    <a href="changelog.html" >ChangeLog</a>
                </li>
                <li>
                    <a href="message.html" >Feedback</a>
                </li>
                <li>
                    <a href="https://terryz.github.io" >主页</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/bDialog" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>

	<div class="content">
	<div class="container" >
		<div class="row-fluid">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 置顶栏广告 -->
			<ins class="adsbygoogle"
				 style="display:block"
				 data-ad-client="ca-pub-4688926342467996"
				 data-ad-slot="5087317872"
				 data-ad-format="auto"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		<h1 class="heading">可多层嵌套高定制化的弹出窗口 <small>支持多层嵌套、高可定制化</small></h1>
        <div class="row-fluid">
            <h4 class="heading">1.基本初始化Modal <small></small></h4>
            <button class="btn btn-default" type="button" id="btnDialog">打开窗口</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	url : 'http://aa.com/load'
});
]]>
</script>
        </div>


        <div class="row-fluid">
            <h4 class="heading">2.消息提示框Alert <small>包含info、warning、error、success、confirm、inputConfirm等类型</small></h4>
            <button class="btn btn-default" type="button" id="btnInfo"><i class="fa fa-info-circle"></i> 提示(info)</button>
            <button class="btn btn-default" type="button" id="btnWarning"><i class="fa fa-exclamation-triangle"></i> 警告(warning)</button>
            <button class="btn btn-default" type="button" id="btnError"><i class="fa fa-ban"></i> 错误(error)</button>
            <button class="btn btn-default" type="button" id="btnSuccess"><i class="fa fa-check-circle-o"></i> 成功(success)</button>
            <button class="btn btn-default" type="button" id="btnConfirm"><i class="fa fa-question-circle-o"></i> 确认(confirm)</button>
            <button class="btn btn-default" type="button" id="btnInputConfirm"><i class="fa fa-question-circle-o"></i> 带输入框的确认(inputConfirm)</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
bDialog.alert('这是一个最简单的消息提示');
//带有关闭后回调的消息提示窗口
bDialog.alert('这是一个设置了回调函数的消息提示',function(data){
    //do something
});
//带有回调，且有窗口设置参数的提示窗口
bDialog.alert('这是一个确认对话框！！',function(data){
    //do something
},{
    messageType : 'confirm'//设置窗口类型为确认对话框窗口
    cancel : function(dlg){//设置对话框在点击取消后，执行的回调
        //do something
    }
});
]]>
</script>
        </div>


        <div class="row-fluid">
            <h4 class="heading">3.边角消息提示框Toast <small>包含info、warning、error、success等类型</small></h4>
            <p>
                <button class="btn btn-default" type="button" id="btnToastInfo"><i class="fa fa-info-circle"></i> 提示(info)</button>
                <button class="btn btn-default" type="button" id="btnToastWarning"><i class="fa fa-exclamation-triangle"></i> 警告(warning)</button>
                <button class="btn btn-default" type="button" id="btnToastError"><i class="fa fa-ban"></i> 错误(error)</button>
                <button class="btn btn-default" type="button" id="btnToastSuccess"><i class="fa fa-check-circle-o"></i> 成功(success)</button>
            </p>
            <button class="btn btn-default" type="button" id="btnToastBL">左下角</button>
            <button class="btn btn-default" type="button" id="btnToastBC">正下方</button>
            <button class="btn btn-default" type="button" id="btnToastBR">右下角</button>
            <button class="btn btn-default" type="button" id="btnToastTL">左上角</button>
            <button class="btn btn-default" type="button" id="btnToastTC">正上方</button>
            <button class="btn btn-default" type="button" id="btnToastTR">右上角</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
bDialog.toast('我是一个Toast消息');
//在左上角显示的警告窗口
bDialog.toast('我是一个Toast消息',{
    //窗口类型
    messageType : 'warning',
    //在左上角显示，不设置则默认右下角
    position : 'topLeft',
    //不显示关闭窗口按钮
    dialogCloseButton : false,
    //关闭自动关闭窗口功能，默认3秒自动关闭
    closeTime : 0
});
]]>
</script>
        </div>


        <div class="row-fluid">
            <h4 class="heading">4.遮罩Mask <small></small></h4>
            <button class="btn btn-default" type="button" id="btnMask">全屏遮罩</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
bDialog.mask('这是一个最简单的消息提示');

//一个简单的应用实例：
//打开遮罩，进行Ajax数据读取，读取完成后，关闭遮罩
var mask = bDialog.mask();
$.ajax({
    url : 'xxx.com/load',
    success : function(){
        bDialog.close(mask);
    }
});
]]>
</script>
        </div>


        <div class="row-fluid">
            <h4 class="heading">5.参数的传递与回传 <small>父窗口与打开窗口之间的数据交互</small></h4>
            <button class="btn btn-default" type="button" id="btnDialog1">打开窗口</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	url : 'http://aa.com/load',
	//传递userName参数给打开的窗口
	params : {
		'userName' : 'zhangsan'
	},
	//关闭窗口后，回传的数据内容将会作为data参数出现在callback函数中，方便进行操作
	callback:function(data){
		if(data && data.results && data.results.length > 0 ){
			bDialog.alert('已完成弹出窗口操作！<br>接收到弹出窗口传回的 userName 参数，值为：<br>' +
			data.results[0].userName + '</br>');
		}else{
			bDialog.alert('弹出窗口未回传参数',$.noop,{
                messageType : 'error'
            });
		}
	}
});

//在被打开的页面中，使用以下的脚本获得上述传递的userName参数：
var param = bDialog.getDialogParams();
$('#userName').val(param.userName);

//关闭弹出的子窗口，并向父窗口回传数据
var data={userName:'lisi', age:20};
bDialog.close(data);
]]>
</script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">6.多层嵌套打开窗口 <small>打开窗口，在该窗口的基础上再打开新窗口</small></h4>
            <button class="btn btn-default" type="button" id="btnDialog2">打开窗口</button>
            <p><span class="label label-default">操作提示</span> 打开窗口后，再次点击“打开窗口”、“打开颜色窗口”、“打开简洁样式窗口”等任意按钮，进行再次打开窗口操作</p>
        </div>
        <div class="row-fluid">
            <h4 class="heading">7.界面定制化 <small>通过参数打开关闭部分内容</small></h4>
            <button class="btn btn-default" type="button" id="btnDialog3">无关闭按钮窗口</button>
            <button class="btn btn-default" type="button" id="btnDialog4">无标题栏窗口</button>
            <button class="btn btn-default" type="button" id="btnDialog5">全宽度窗口</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
bDialog.open({
	//title属性设置为false，则关闭标题栏
	title : false,
	width : 500,
	height : 450,
	//关闭窗口右上角的关闭按钮
	dialogCloseButton : false,
	//全宽度展示窗口
	fullWidth : true,
	url : 'http://aa.com/load'
});
]]>
</script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">8.窗口皮肤使用 <small>仅指定不同样式名称即可完全改变窗口的外观</small></h4>
            <button class="btn btn-default" type="button" id="btnDialog6">默认样式窗口(original)</button>
            <button class="btn btn-default" type="button" id="btnDialog7">颜色标题窗口(blue)</button>
            <button class="btn btn-default" type="button" id="btnDialog8">简洁内容窗口(simple)</button>
            <p>样式定义：</p>
            <script type="syntaxhighlighter" class="brush:css">
<![CDATA[
div.original{
	-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
}
div.original div.modal-header {
	background-color: white;
	-webkit-border-top-left-radius: 8px;
    -moz-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
}
div.blue{
	-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
}
div.blue div.modal-header {
	background-color: #0866C6;
}
div.blue div.modal-header h3 {
	color: white;
}
div.blue div.modal-header button.close {
	opacity: 1;color: white;font-weight: normal;
}
div.simple div.modal-header {
	background-color: white;border-bottom: 0px;
}
div.simple div.modal-header h3 {
	display: none;
}
div.simple div.modal-header button.close {
	opacity: 1;font-size: 26px !important;
	border: 3px solid white;background-color: black;
	width: 40px;height: 40px;
	-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    color: #EEEEEE;text-shadow:none;font-weight: normal;position: absolute;
	right: -20px;top: -25px;z-index: 10;
}
]]>
</script>
            <p>脚本代码：</p>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	customClass : 'simple',
	url : 'http://aa.com/load'
});
]]>
</script>
        </div>


        <div class="row-fluid">
            <h4 class="heading">9.打开页面片段 <small>将页面中已经定义好的HTML内容，放在弹出窗口中展示</small></h4>
            <div id="innerContent" class="hide">
                <div>
                    <h1 id="support" class="page-header">浏览器和设备的支持情况</h1>
                    <p class="lead">Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。</p>

                    <h2 id="support-browsers">被支持的浏览器</h2>
                    <p>特别注意，我们坚决支持这些浏览器的<strong>最新版本</strong>。</p>
                </div>
            </div>
            <button class="btn btn-default" type="button" id="btnDialog9">打开窗口</button>
            <script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- HTML部分 -->
<div id="innerContent" class="hide">
	<div>
		<h1 id="support" class="page-header">浏览器和设备的支持情况</h1>
		<p class="lead">Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。</p>
		
		<h2 id="support-browsers">被支持的浏览器</h2>
		<p>特别注意，我们坚决支持这些浏览器的<strong>最新版本</strong>。</p>
	</div>
</div>
]]>
</script>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//参数1为插件初始化参数，参数2为页面片段模式传递的页面内容
bDialog.open({
	title : '页面片段窗口',
	width : 500,
	height : 450,
	dom : $('#innerContent').html()
});
]]>
</script>
        </div>
		
		
		
		
		
		
		
		
		
		
		
		
<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-terryz-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
		
		
	</div>
	</div>








    






<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/jquery-ui.min.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script type="text/javascript">
$(function(){
	SyntaxHighlighter.all();
});
</script>

<script type="text/javascript" src="../lib/bdialog/b.dialog.js" ></script>

<script type="text/javascript" src="../js/bdialog/demo.js" ></script>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>